<!-- <template>
  <n-card :bordered="false" class="proCard">
    <BasicTable
      title="表格列表"
      titleTooltip="这是一个提示"
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="actionRef"
      :actionColumn="actionColumn"
      @edit-end="editEnd"
      @edit-change="onEditChange"
      @update:checked-row-keys="onCheckedRow"
      :scroll-x="1590"
    >
      <template #toolbar>
        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
      </template>
    </BasicTable>
  </n-card>
</template> -->

<template>
  <div>
    <div>
      <n-space vertical>
        <n-select id="select" v-model:value="value" :options="options" @update:value="change1" />
      </n-space>
    </div>
    <div>
      <n-table :bordered="false" :single-line="false">
        <thead>
          <tr align="center">
            <th>申请人</th>
            <th>申请原因</th>
            <th>申请时间</th>
            <th>申请状态</th>
            <th>处理人</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in itmes" :key="item.id" align="center">
            <td>{{ item.person }}</td>
            <td>{{ item.reason }}</td>
            <td>{{ format(new Date(item.createtime), 'yyyy-MM-dd HH:mm:ss') }}</td>
            <td>{{ item.status == 0 ? '未审批' : item.status == 1 ? '已通过' : '未通过' }}</td>
            <th>{{item.processedBy}}</th>
            <td>
              <NButton @click="agree(item)">同意</NButton>
              <NButton @click="refuse(item)">拒绝</NButton>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { http } from '@/utils/http/axios';
import { NButton } from 'naive-ui';
import { ref } from 'vue';
import { format } from 'date-fns';
const arr: any = [];
const itmes: any = ref([]);
const value = ref('every');
const options = [
  {
    label: '所有',
    value: 'every',
  },
  {
    label: '已通过',
    value: 1,
  },

  {
    label: '未通过',
    value: 2,
  },
  {
    label: '未审批',
    value: 0,
  },
];
type FormState = {
  code: Number;
  message: String;
  result: Array<any>;
};
const getItme = async () => {
  const a = await http.request<any>({ url: '/examine', method: 'GET' });
  console.log(a);
  for (let i = 0; i < a.length; i++) {
    arr.push(a[i]);
    // console.log(a[i]);
  }
  itmes.value = arr;
  // console.log(a.length);
  // console.log(itmes);

  return a;
};
// // const itmes = getItme();
getItme();

const agree = async (item: any) => {
  // console.log(item);
  // console.log(item.begindate.toLocaleString().replace(/:\d{1,2}$/, ''));

  const a = await http.request<FormState>({
    url: `/examine`,
    method: 'put',
    data: {
      id: item.id,
      person: item.person,
      reason: item.reason,
      createtime:  format(new Date(item.createtime), 'yyyy-MM-dd HH:mm:ss'),
      status: 1,
    },
  });
  console.log(a);
  location.reload();
};
const refuse = async (item: any) => {
  const a = await http.request<FormState>({
    url: `/examine`,
    method: 'put',
    data: {
      id: item.id,
      person: item.person,
      reason: item.reason,
      createtime: format(new Date(item.createtime), 'yyyy-MM-dd HH:mm:ss'),
      status: 2,
    },
  });
  console.log(a);
  location.reload();
};
const change1 = (value: number | string): any => {
  // console.log(value);
  if (value == 'every') {
    itmes.value = [];
    itmes.value = arr;
    console.log(itmes);
  } else if (value == 1) {
    itmes.value = [];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].status == 1) {
        itmes.value.push(arr[i]);
      }
    }
  } else if (value == 2) {
    itmes.value = [];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].status == 2) {
        itmes.value.push(arr[i]);
      }
    }
  } else if (value == 0) {
    itmes.value = [];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].status == 0) {
        itmes.value.push(arr[i]);
      }
    }
  }
};
// import { reactive, ref, h } from 'vue';
// import { BasicTable, TableAction } from '@/components/Table';
// import { getTableList } from '@/api/table/list';
// import { columns } from './rowColumns';

// const actionRef = ref();
// const currentEditKeyRef = ref('');
// const params = reactive({
//   pageSize: 5,
//   name: 'xiaoMa',
// });

// const actionColumn = reactive({
//   width: 150,
//   title: '操作',
//   key: 'action',
//   fixed: 'right',
//   align: 'center',
//   render(record) {
//     return h(TableAction, {
//       style: 'button',
//       actions: createActions(record),
//     });
//   },
// });

// function handleEdit(record) {
//   currentEditKeyRef.value = record.key;
//   record.onEdit?.(true);
// }

// function handleCancel(record) {
//   currentEditKeyRef.value = '';
//   record.onEdit?.(false, false);
// }

// function onEditChange({ column, value, record }) {
//   if (column.key === 'id') {
//     record.editValueRefs.name4.value = `${value}`;
//   }
//   console.log(column, value, record);
// }

// async function handleSave(record) {
//   const pass = await record.onEdit?.(false, true);
//   if (pass) {
//     currentEditKeyRef.value = '';
//   }
// }

// function createActions(record) {
//   if (!record.editable) {
//     return [
//       {
//         label: '编辑',
//         onClick: handleEdit.bind(null, record),
//       },
//     ];
//   } else {
//     return [
//       {
//         label: '保存',
//         onClick: handleSave.bind(null, record),
//       },
//       {
//         label: '取消',
//         onClick: handleCancel.bind(null, record),
//       },
//     ];
//   }
// }

// const loadDataTable = async (res) => {
//   return await getTableList({ ...params, ...res });
// };

// function onCheckedRow(rowKeys) {
//   console.log(rowKeys);
// }

// function reloadTable() {
//   console.log(actionRef.value);
//   actionRef.value.reload();
// }

// function editEnd({ record, index, key, value }) {
//   console.log(value);
// }
</script>

<style lang="less" scoped></style>
